<template>
  <!-- 按钮 -->
  <div class="right_clip">
    <div class="tool_list">
      <div class="tool">
        <img :src="img.toumingdi" alt="" srcset="" />
        <p>透明底</p>
        <input
          type="file"
          @change="transparentBottom($event)"
          ref="transparentBottom"
          multiple="multiple"
        />
      </div>
      <div class="tool">
        <img :src="img.fanxiang" alt="" srcset="" />
        <p>反相</p>
        <input
          type="file"
          @change="reversePhase($event)"
          ref="reversePhase"
          multiple="multiple"
        />
      </div>
      <div class="tool">
        <img :src="img.qubaibian" alt="" srcset="" />
        <p>裁边</p>
        <input
          type="file"
          @change="toWhite($event)"
          ref="toWhite"
          multiple="multiple"
        />
      </div>
    </div>
  </div>
</template>
  
  <script>
import { mapState } from "vuex";
import mixin from "@/utils/mixin";

export default {
  mixins: [mixin],

  computed: {
    ...mapState("templateStage", ["proscenium"]),
  },
  props: {
    addbutton: String,
  },
  data() {
    return {
      cliplist: [],
      toollist: ["透明底", "裁边", "反相"],
    };
  },
  methods: {
    //透明底
    transparentBottom(e) {
      let that = this;
      let list = e.target.files;
      for (var i = 0; i < list.length; i++) {
        let name = list[i].name.substring(0, list[i].name.lastIndexOf("."));
        const reader = new FileReader();
        reader.onload = (res) => {
          const img = new Image();
          img.onload = () => {
            const rgba = [255, 255, 255, 255];
            //容差大小
            const tolerance = 60;
            var imgData = null;
            const [r0, g0, b0, a0] = rgba;
            var r, g, b, a;
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            const w = img.width;
            const h = img.height;
            canvas.width = w;
            canvas.height = h;
            var img2 = new Image();

            img2.onload = function () {
              context.drawImage(this, 0, 0);
              imgData = context.getImageData(0, 0, w, h);
              for (let i = 0; i < imgData.data.length; i += 4) {
                r = imgData.data[i];
                g = imgData.data[i + 1];
                b = imgData.data[i + 2];
                a = imgData.data[i + 3];
                const t = Math.sqrt(
                  (r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2
                );
                if (t <= tolerance) {
                  imgData.data[i] = 0;
                  imgData.data[i + 1] = 0;
                  imgData.data[i + 2] = 0;
                  imgData.data[i + 3] = 0;
                }
              }
              context.putImageData(imgData, 0, 0);
              const newBase64 = canvas.toDataURL("image/png");
              that.$datatools.downloadURI(newBase64, `${name}.png`);
              that.$refs.transparentBottom.value = null;
            };
            img2.crossOrigin = "";
            img2.src = img.src;
          };
          img.crossOrigin = "";
          img.src = res.target.result;
        };
        reader.readAsDataURL(list[i]);
      }
    },
    //反相
    reversePhase(e) {
      let that = this;
      let list = e.target.files;
      for (var i = 0; i < list.length; i++) {
        let name = list[i].name.substring(0, list[i].name.lastIndexOf("."));
        const reader = new FileReader();
        reader.onload = (res) => {
          const img = new Image();
          img.onload = () => {
            var imgData = null;
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            const w = img.width;
            const h = img.height;
            canvas.width = w;
            canvas.height = h;
            let img2 = new Image();
            img2.onload = function () {
              context.drawImage(this, 0, 0);
              imgData = context.getImageData(0, 0, w, h);
              var newBase64;
              for (let i = 0; i < imgData.data.length; i += 4) {
                imgData.data[i] = 255 - imgData.data[i]; // red 红
                imgData.data[i + 1] = 255 - imgData.data[i + 1]; // green 绿
                imgData.data[i + 2] = 255 - imgData.data[i + 2]; // blue蓝
                // i+3 is alpha  (the fourth element) i+3是透明度(第四个元素)
              }
              context.putImageData(imgData, 0, 0);
              newBase64 = canvas.toDataURL("image/png");
              that.$datatools.downloadURI(newBase64, `${name}.png`);
              that.$refs.reversePhase.value = null;
            };
            img2.crossOrigin = "";
            img2.src = img.src;
          };
          img.crossOrigin = "";
          img.src = res.target.result;
        };
        reader.readAsDataURL(list[i]);
      }
    },
    //去白边
    toWhite(e) {
      let that = this;
      let list = e.target.files;
      for (var i = 0; i < list.length; i++) {
        let name = list[i].name.substring(0, list[i].name.lastIndexOf("."));
        const reader = new FileReader();
        reader.onload = (res) => {
          const img = new Image();
          img.onload = () => {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            const w = img.width;
            const h = img.height;
            canvas.width = w;
            canvas.height = h;
            var img2 = new Image();
            img2.crossOrigin = "";
            img2.onload = function () {
              var newBase64;
              context.drawImage(img, 0, 0); //绘制
              let imgData = context.getImageData(0, 0, w, h); //读取图片数据
              let lOffset = w,
                rOffset = 0,
                tOffset = h,
                bOffset = 0;
              for (let i = 0; i < canvas.width; i++) {
                for (let j = 0; j < canvas.height; j++) {
                  let pos = (i + canvas.width * j) * 4;
                  if (
                    imgData.data[pos] == 255 ||
                    imgData.data[pos + 1] == 255 ||
                    imgData.data[pos + 2] == 255 ||
                    imgData.data[pos + 3] == 255
                  ) {
                    bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                    rOffset = Math.max(i, rOffset); // 找到有色彩的最右端
                    tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                    lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                  }
                }
              }
              lOffset++;
              rOffset++;
              tOffset++;
              bOffset++;
              var x = document.createElement("canvas"); //创建处理后画布对象
              x.width = rOffset - lOffset;
              x.height = bOffset - tOffset;
              var xx = x.getContext("2d");
              xx.drawImage(
                img,
                lOffset,
                tOffset,
                x.width,
                x.height,
                0,
                0,
                x.width,
                x.height
              ); //绘制
              context.putImageData(imgData, 0, 0);
              newBase64 = x.toDataURL("image/png");
              that.$datatools.downloadURI(newBase64, `${name}.png`);
              that.$refs.toWhite.value = null;
            };
            img2.src = img.src;
          };
          img.crossOrigin = "";
          img.src = res.target.result;
        };
        reader.readAsDataURL(list[i]);
      }
    },
    // onDrag: function (e) {
    //   e.stopPropagation();
    //   e.preventDefault();
    // },
    // onDrop: function (e) {
    //   e.stopPropagation();
    //   e.preventDefault();
    //   // console.log(e);
    //   // let dt = e.dataTransfer;
    //   // document.querySelector(".imgName").innerHTML = imgfile.files[0].name;
    //   // let reader = new FileReader();
    //   // reader.readAsDataURL(dt.files[0]);
    //   // reader.onload = function () {
    //   //   document.querySelector("img").src = this.result;
    //   // };
    //   // this.file = e.target.files;
    // },
  },
  mounted() {
    // let clip = this.$refs.clip;
    // clip.addEventListener("dragenter", this.onDrag, false);
    // // clip.addEventListener("dragover", this.onDrag, false);
    // clip.addEventListener("drop", this.onDrop, false);
  },
};
</script>
  
  <style lang="less" scoped>
@import "../../assets/styles/frame.less";
.right_clip {
  width: 100%;
  .tool_list {
    width: 100%;
    .tool {
      position: relative;
      margin-top: 20px;
      width: 100%;
      height: 40px;
      background: #ffffff;
      border: 1px solid #cacaca;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #2B2B2B;
      .cen();
      img {
        width: 15px;
        height: 15px;
        margin: 5px;
      }
      input {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }
    }
    .tool:nth-child(1){
      margin-top:41px ;
    }
    .tool:active{
      border: 1px solid #2b2b2b;
    }
  }
}
</style>